<template>

    <div>
        <div :class="['sale_all_count', 'flex_around', size == 'small' ? 'small' : 'lager']">
            <div class="sale_all_count_item" :style="{ width: rowCol + '%' }">
                <div class="sale_all_count_item_label flex_row">
                    <img class="sale_all_count_item_label_img" src="@/static/icon/sss.png" alt="销售流水">
                    <span class="ml5">{{ title1Name }}</span>
                </div>
                <div class="sale_all_count_item_value font_green ellipsis" :title="count_all.amount || '--'">{{
                    count_all.amount || '--' }}</div>
            </div>
            <!-- <div class="sale_all_count_item" :style="{ width: rowCol + '%' }" v-if="fromTypes == 'yy'">
                <div class="sale_all_count_item_label flex_row">
                    <img class="sale_all_count_item_label_img" src="@/static/icon/ssss.png" alt="毛利">
                    <span class="ml5">成本</span>
                </div>
                <div class="sale_all_count_item_value ellipsis" :title="count_all.cost || '--'">{{ count_all.cost ||
                    '--' }}</div>
            </div> -->
            <!-- <div class="sale_all_count_item" :style="{ width: rowCol + '%' }" v-else>
                <div class="sale_all_count_item_label flex_row">
                    <img class="sale_all_count_item_label_img" src="@/static/icon/ssss.png" alt="毛利">
                    <span class="ml5">毛利</span>
                </div>
                <div class="sale_all_count_item_value ellipsis" :title="count_all.profit || '--'">{{ count_all.profit ||
                    '--' }}</div>
            </div> -->
            <div class="sale_all_count_item" :style="{ width: rowCol + '%' }">
                <div class="sale_all_count_item_label flex_row">
                    <img class="sale_all_count_item_label_img" src="@/static/icon/ss.png" alt="销量">
                    <span class="ml5">{{ title2Name }}</span>
                </div>
                <div class="sale_all_count_item_value ellipsis" :title="count_all.number || '--'">{{ count_all.number ||
                    '--' }}</div>
            </div>
            <div class="sale_all_count_item" :style="{ width: rowCol + '%' }">
                <div class="sale_all_count_item_label flex_row">
                    <img class="sale_all_count_item_label_img" src="@/static/icon/ssss.png" alt="单数">
                    <span class="ml5">全部单数</span>
                </div>
                <div class="sale_all_count_item_value ellipsis" :title="count_all.num_od || '--'">{{ count_all.num_od ||
                    '--' }}</div>
            </div>
            <!-- <div class="sale_all_count_item" :style="{ width: rowCol + '%' }">
                <div class="sale_all_count_item_label flex_row">
                    <img class="sale_all_count_item_label_img" style="width: 16px;height: auto;"
                        src="@/static/icon/amount_th.svg" alt="全部退货额">
                    <span class="ml5">全部退货额</span>
                </div>
                <div class="sale_all_count_item_value font_red ellipsis" :title="count_all.amount_th || '--'">{{
                    count_all.amount_th || '--' }}</div>
            </div> -->
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, defineProps,computed } from '@vue/composition-api'
import { usePurchaseState } from '@/pages/report/hooks/usePurchaseState'
// 获取当前组件实例
const { proxy } = getCurrentInstance()
const {
    fromTypes,
} = usePurchaseState()

const title1Name = computed(() => {
    return '全部采购额'
})

const title2Name = computed(() => {
    return '全部采购量'
})

const props = defineProps({
    count_all: {
        type: Object,
        default: () => ({})
    },
    rowCol: {
        type: [String, Number],
        default: 19,
    },
    size: {
        type: [String, Number],
        default: 'lager',  // small 小号  默认大号：lager
    }
})


</script>

<style lang="scss" scoped>
.sale_all_count {
    box-sizing: border-box;
    // padding: 10px 5px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;

    .sale_all_count_item {
        box-sizing: border-box;
        padding: 10px 14px;
        min-width: 100px;
        flex-grow: 1;
        border-radius: 10px;
        color: #333;
        background: linear-gradient(224deg, rgba(255, 255, 255, 0) -18%, rgb(255, 255, 255) 24%, rgb(255, 255, 255) 76%, rgba(241, 241, 255, 0) 131%), rgb(235, 235, 255);
        border: 1px solid rgb(232, 234, 242);
    }

    .sale_all_count_item_label {
        font-size: 16px;
        white-space: nowrap;
    }

    .sale_all_count_item_value {
        font-size: 24px;
        font-weight: 500;
        margin-top: -4px;
        margin-left: 4px;
    }

    .sale_all_count_item_label_img {
        width: 26px;
        height: auto;
    }
}

.small {
    .sale_all_count_item {
        padding: 10px 14px 2px;
    }
    .sale_all_count_item_label {
        font-size: 12px;
    }
    .sale_all_count_item_value {
        font-size: 16px;
        margin-top: 1px;
        margin-left: 6px;
    }
    .sale_all_count_item_label_img {
        width: 20px;
    }
}

@media screen and (max-width: 1200px) {
    .sale_all_count {
        .sale_all_count_item {
            width: calc(50% - 10px) !important;
        }
    }
}

@media screen and (max-width: 768px) {
    .sale_all_count {
        .sale_all_count_item {
            width: 100% !important;
        }
    }
}
</style>